<template>
  <!-- 折线图7  -->
  <div ref="index" class="index"></div>
</template>
<script setup lang="ts">
import { Bottom } from "@element-plus/icons";
import * as echarts from "echarts";
import { ref, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});
// 定义值
let index = ref(); //ref的应用
// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(index.value);
  let icon_Map = {
    大雪: "",
    大雨: "",
    多云: "",
    雨加雪:
      "",
  };
  let zh_en = {
    大雪: "MajorSnow",
    大雨: "heavyRain",
    多云: "cloudy",
    雨加雪: "sleet",
  };
  let data = [
    {
      time: "09:00",
      quality: "优",
      grade: "1级",
      weather: "大雪",
      value: 8,
    },
    {
      time: "10:00",
      quality: "优",
      grade: "1级",
      weather: "大雨",
      value: 7,
    },
    {
      time: "11:00",
      quality: "优",
      grade: "1级",
      weather: "多云",
      value: 8,
    },
    {
      time: "12:00",
      quality: "优",
      grade: "1级",
      weather: "大雪",
      value: 8,
    },
    {
      time: "13:00",
      quality: "优",
      grade: "1级",
      weather: "雨加雪",
      value: 5,
    },
    {
      time: "14:00",
      quality: "优",
      grade: "1级",
      weather: "大雪",
      value: 5,
    },
    {
      time: "15:00",
      quality: "优",
      grade: "1级",
      weather: "大雪",
      value: 5,
    },
    {
      time: "16:00",
      quality: "优",
      grade: "1级",
      weather: "大雪",
      value: 8,
    },
    {
      time: "17:00",
      quality: "优",
      grade: "1级",
      weather: "多云",
      value: 12,
    },
    {
      time: "18:00",
      quality: "优",
      grade: "1级",
      weather: "多云",
      value: 15,
    },
    {
      time: "19:00",
      quality: "优",
      grade: "1级",
      weather: "多云",
      value: 5,
    },
  ];
  let maxArr = [];
  maxArr.length = data.length;
  maxArr.fill(1);
  console.log(maxArr);
  let rich_weathers = {};
  let rich_img_w = 39;
  for (let k in icon_Map) {
    let rich_key = zh_en[k];
    rich_weathers[rich_key] = {
      width: rich_img_w,
      height: 32,
      backgroundColor: {
        image: icon_Map[k],
      },
    };
  }
  let lineSymbol = ``;
  let xdata = [1, 2, 3];
  let option = {
    backgroundColor: "#5d87bb",
    grid: [
      {
        containLabel: true,
        left: "3%",
        top: "10%",
        right: "3%",
        bottom: "3%",
        backgroundColor: "#5d87bb",
      },
      {
        containLabel: true,
        left: "3%",
        top: "10%",
        right: "3%",bottom: "3%",
        backgroundColor: "#5d87bb",
      },
    ],
    title: {
      text: "鼠标按下拖拽试试",
    },
    dataZoom: [
      {
        show: false, // 为true 滚动条出现
        realtime: true,
        type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
        startValue: 0, // 表示默认展示20%～80%这一段。
        endValue: 5,
        right: "3%",
        left: "3%",
        height: "10",
        xAxisIndex: [0, 1], //关联多个y轴
        moveHandleStyle: {
          color: "rgba(89, 202, 241,.5)",
        },
        moveHandleSize: "6",
        emphasis: {
          moveHandleStyle: {
            color: "rgba(89, 202, 241,.5)",
          },
        },
        textStyle: {
          color: "rgba(255,255,255,0)",
        },
        backgroundColor: "rgba(255,255,255,.1)",
        borderColor: "rgba(255,255,255,0)",
        fillerColor: "rgba(0,0,0,0)",
        handleSize: "6",
        handleStyle: {
          color: "rgba(255,255,255,0)",
        },
        brushStyle: {
          color: "rgba(129, 243, 253)",
        },
      },
      {
        type: "inside",
        xAxisIndex: [0, 1], //关联多个y轴
        zoomOnMouseWheel: false, //滚轮是否触发缩放
        moveOnMouseMove: true,
      },
    ],
    xAxis: [
      {
        type: "category",
        data: data.map((v) => {
          return v.time;
        }),
        triggerEvent: true,
        axisLabel: {
          margin: 14,
          show: true,
          formatter: (v) => {
            let filter_ = data.filter((o) => o.time == v)[0];
            let rich_key = zh_en[filter_.weather];

            let grade = filter_.grade;
            let quality = filter_.quality;
            let timeH = filter_.time;
            let currentHours = new Date().getHours();
            let xHours = timeH.split(":")[0];
            if (xHours == currentHours) {
              return `{${rich_key}| }\n{grade|${grade}}\n{quality|${quality}}\n{timeHA|当前}`;
            }
            return `{${rich_key}| }\n{grade|${grade}}\n{quality|${quality}}\n{timeH|${timeH}}`;
          },
          rich: {
            ...rich_weathers,
            grade: {
              color: "#ffffff9a",
              height: 10,
              lineHeight: 30,
              fontSize: 14,
              align: "center",
              padding: [1, 3, 0, 0],
              width: rich_img_w,
            },
            quality: {
              color: "#ffffff9a",
              height: 10,
              fontSize: 12,
              align: "center",
              width: rich_img_w,
              borderRadius: 4,
              padding: [1.5, 3, 0, 0],
              backgroundColor: "#ffffff1a",
            },
            timeH: {
              color: "#ffffff9a",
              height: 16,
              fontSize: 12,
              align: "center",
              width: rich_img_w,
              borderRadius: 4,
              padding: [1, 3, 0, 0],
            },
            timeHA: {
              color: "#ffffff",
              height: 26,
              fontSize: 12,
              align: "center",
              width: rich_img_w,
              borderRadius: 4,
              padding: [1, 3, 0, 0],
            },
          },
        },
        gridIndex: 0,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },

      // 注意gridIndex的值
      // 用于滚动的无意义的，由于刻度鼠标拖拽无法响应，dataZoom的事件。这里加一个无意义的xaxis用于铺满全屏的grid
      // 使用series的拖拽达到效果
      {
        type: "category",
        position: "bottom",
        triggerEvent: true,
        data: [],
        gridIndex: 1,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        gridIndex: 0,
        axisLabel: {
          show: false,
        },
        min: data.map((v) => v.value).sort((a, b) => a - b)[0],
        max: data.map((v) => v.value).sort((a, b) => b - a)[0],
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },

      // 由于 axios轴 鼠标拖拽无法滚动，加一个铺满全容器的 grid 覆盖 进而可以拖拽滚动
      // 注意gridIndex的值
      {
        type: "value",
        max: 1,
        min: 0,
        gridIndex: 1,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    color: ["#00e529"],
    series: [
      {
        type: "line",
        symbolSize: 10,
        symbol: "image://" + lineSymbol,
        data: data,
        yAxisIndex: 0,
        xAxisIndex: 0,
        smooth: true,
        label: {
          show: true,
          position: "top",
          distance: 5,
          formatter: (v) => {
            return v.value + "°";
          },
          color: "#fff",
          fontSize: 18,
          fontWeight: 600,
        },
      },

      // 由于 axios轴 鼠标拖拽无法滚动，加一个铺满全容器的 grid 覆盖 进而可以拖拽滚动
      {
        data: maxArr,
        type: "line",
        yAxisIndex: 1,
        xAxisIndex: 1,
        itemStyle: {
          opacity: 0,
        },
        tooltip: {
          show: false,
        },
      },
    ],
  };

  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.carData,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 200px;
}
</style>
